<template>
  <div v-if="visible" class="mold-use-root">
    <el-card v-if="state.useMoldInBill">
      <template #header>
        <div class="el-card-head">
          <div class="mold-name">
            <el-tag>{{ state.useMoldInBill.typeName }}</el-tag>
            {{ state.useMoldInBill.moldName }}
          </div>
          <el-button type="primary" @click="toXM">下模</el-button>
        </div>
      </template>
      <div class="el-card-body">
        <vab-icon class="icon" icon="speaker-3-fill" style="font-size: 48px" />
        <div class="mold-content">
          <div style="flex: 1">
            <div class="mold-item">
              <div class="label">模具编码</div>
              {{ state.useMoldInBill.moldCode }}
            </div>

            <div class="mold-item">
              <div class="label">出库编码</div>
              {{ state.useMoldInBill.outBillCode }}
            </div>

            <div class="mold-item">
              <div class="label">模具仓库</div>
              {{ state.useMoldInBill.whName }}
            </div>
            <div class="mold-item">
              <div class="label">操作人员</div>
              {{ state.useMoldInBill.createUser }}
            </div>
          </div>
          <div style="flex: 1">
            <div class="mold-item">
              <div class="label">模具规格</div>
              {{ state.useMoldInBill.moldSpec }}
            </div>

            <div class="mold-item">
              <div class="label">模具批次</div>
              {{ state.useMoldInBill.moldBatch }}
            </div>
            <div class="mold-item">
              <div class="label">操作时间</div>
              {{ state.useMoldInBill.createTime }}
            </div>

            <div class="mold-item">
              <div class="label" style="background-color: transparent">
                &nbsp;
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card v-else header="模具领用">
      <div style="padding: 12px 120px">
        <el-input v-model="state.form.moldBarcode" placeholder="请录入模具条码">
          <template #append>
            <div>
              <el-button :icon="MoreFilled" @click="toSelectMold" />
            </div>
          </template>
        </el-input>
      </div>
      <moldListDialog
        ref="moldListDialogRef"
        @select-mold-callback="selectMoldCallback"
      />
    </el-card>
  </div>
</template>
<script setup>
  import moldListDialog from '../dialog/moldListDialog.vue'
  import { MoreFilled } from '@element-plus/icons-vue'
  import {
    getMoldInBillApi,
    xiaMoldInBillApi,
    addOutbillApi,
  } from '@/api/equip/mold_api'
  // xiaMoldInBillApi
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseLoading = inject('$baseLoading'),
    $baseMessage = inject('$baseMessage'),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp),
    visible = ref(false),
    moldListDialogRef = ref()
  const state = reactive({
    dispatchData: null,
    useMoldInBill: null,
    form: {
      moldBarcode: '',
    },
  })

  const queryMoldInBillRecord = async () => {
    const { data } = await getMoldInBillApi({
      pkCorp,
      pkDispatchMid: state.dispatchData.pkDispatchMid,
    })
    state.useMoldInBill = data
  }

  const toXM = async () => {
    const { msg } = await xiaMoldInBillApi({
      ...state.useMoldInBill,
    })
    $baseMessage(msg, 'success')
    state.useMoldInBill = null
    toShow(this.dispatchData)
  }

  const selectMoldCallback = async (moldData) => {
    console.log('selectMoldCallback', moldData)
    const load = $baseLoading()
    const params = {
      pkMoldOutType: 'IOTT0000000000000003',
      pkDispatchMid: state.dispatchData.pkDispatchMid,
      pkCorp: pkCorp,
      pkMoldWh: moldData.pkMoldWh,
      moldOutBillBs: [
        {
          pkMoldDoc: moldData.pkMoldDoc,
          qty: 1,
          moldBatch: moldData.moldBatch,
        },
      ],
    }
    try {
      const { msg } = await addOutbillApi(params)
      $baseMessage(msg, 'success')
      queryMoldInBillRecord()
      load.close()
      console.log('selectMoldCallback', res)
    } catch (error) {
      load.close()
    }
  }

  const toShow = (dispatchData) => {
    visible.value = true
    state.dispatchData = dispatchData
    console.log('dispatchData', dispatchData)
    queryMoldInBillRecord()
  }
  const toHide = () => {
    visible.value = false
    state.dispatchData = null
  }
  const toSelectMold = () => {
    moldListDialogRef.value.handleOpen(state.dispatchData.pkMoldDoc)
  }
  defineExpose({
    toShow,
    toHide,
  })
</script>
<style lang="scss" scoped>
  .mold-use-root {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .el-card-head {
      display: flex;
      flex-direction: row;
      align-items: center;
      .mold-name {
        flex: 1;
        font-size: 18px;
        color: #333;
      }
    }
    .el-card-body {
      display: flex;
      flex-direction: row;
      align-items: center;
      .mold-content {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        line-height: 24px;
        .mold-item {
          display: flex;
          flex-direction: row;
          margin: 3px 0;
          .label {
            width: 80px;
            margin-right: 5px;
            text-align: center;
            background-color: #f0f1f2;
            border-radius: 3px;
          }
        }
      }
    }
  }
</style>
